<template>
  <div>
    <el-container style="background: #f5f7f9;">
      <el-header style="background: #fff;padding: 12px 12px;height:auto;">
        <div>
          <el-form :model="queryData" :inline="true" size="small">
            <el-form-item label="订单号">
              <el-input v-model="queryData.orderId" :rows="1" style="width: 280px;" type="textarea" placeholder="多个单号用回车分割" />
            </el-form-item>
            <el-form-item label="产品">
              <el-select v-model="queryData.channelId" clearable filterable>
                <el-option v-for="(d, i) in channelOptions" :key="i" :label="d.name" :value="d.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryOrder()">搜 索</el-button>
              <el-button size="small" @click="deleteOrders">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <el-main style="margin-top: 15px; background: #fff;padding: 12px 16px 0 16px;height: 100%;">
        <el-table ref="multipleTable" :data="tableData" stripe tooltip-effect="dark" :max-height="tableHeight" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="orderNumber" label="订单号" />
          <el-table-column prop="orgOwnerName" label="客户" />
          <el-table-column prop="customerRef" label="客户订单号" />
          <el-table-column prop="channelName" label="产品" />
          <el-table-column prop="totalCarton" width="55" label="箱数" />
          <el-table-column prop="masterTrackingNumber" label="追踪号" />
          <el-table-column prop="createAt" label="创建时间" />
          <el-table-column prop="message" label="异常原因" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <i v-has="20301" class="el-icon-edit-outline" @click="edit(scope.row)" />
              <i v-has="20302" class="el-icon-download" @click="downloadLabel(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="padding:0;background: #fff;">
        <div style="text-align: right; padding-top: 10px;">
          <el-pagination background :current-page="queryData.currentPage" :page-sizes="[50, 100, 200, 300, 400]" :page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </el-footer>
    </el-container>
    <el-dialog :visible.sync="editerDialogVisible" width="70%" center :close-on-click-modal="false" top="0">
      <order-editer :order-data-from-editer="formData" :carton-list-from-editer="packingListTableBody" />
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import request from '@/utils/request'
import { copyProperty } from '@/utils/tools'
import orderEditer from './add'
export default {
  components: { orderEditer },
  data() {
    return {
      editerDialogVisible: false,
      queryData: {
        pageSize: 50,
        currentPage: 1,
        orgOwner: '',
        orderId: '',
        customerRef: '',
        channelId: ''
      },
      tableData: [],
      multipleSelection: [],
      total: 0,
      channelProduct: [],
      channelMap: {},
      statusMap: {},
      formDataDefault: {
        orderId: '',
        channelId: '',
        customerRef: '',
        consigneeAddress: {
          contacter: '',
          phone: '',
          countryCode: '',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false'
        },
        cartons: [],
        totalCarton: null
      },
      formData: {
        orderId: '',
        channelId: '',
        customerRef: '',
        consigneeAddress: {
          contacter: '',
          phone: '',
          countryCode: '',
          state: '',
          city: '',
          address: '',
          address2: '',
          company: '',
          zipCode: '',
          fbaCode: '',
          deliverySignature: 'false'
        },
        cartons: [],
        totalCarton: null,
        editing: true
      },
      packingListTableBody: []
    }
  },
  created() {
    this.queryOrder()
  },
  computed: {
    tableHeight() {
      return document.documentElement.clientHeight - 250
    },
    ...mapState(//
      {
        channelOptions: state => state.base.channelOptions
      }
    )
  },
  methods: {
    // 搜索
    onSubmit() {
      console.log('搜索')
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row)
    },
    // 查看
    handleLook(index, row) {
      console.log(index, row)
    },
    // 删除
    handleDelete(index, row) {

    },
    deleteOrders() {
      const orderIds = []
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: '提示',
          message: '请选择订单'
        })
        return
      }
      this.multipleSelection.forEach(a => {
        orderIds.push(a.orderId)
      })
      this.$confirm('是否取消的订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      })
    },
    handleSizeChange(val) {
        this.queryData.currentPage = 1
        this.queryData.pageSize = val
        this.queryOrder()
    },
    handleCurrentChange(val) {
        this.queryData.currentPage = val
        this.queryOrder()
    },
    queryOrder() {
      request({
        url: 'order-exception',
        data: this.queryData,
        method: 'post'
      }).then(res => {
        if (res.success) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    // 查看
    edit(row) {
      request({
        url: 'order/detail?orderId=' + row.orderId,
        method: 'get'
      }).then(res => {
        if (res.success) {
          copyProperty(this.formData, this.formDataDefault)
          this.formData.channelId = row.channelId + ''
          this.formData.customerRef = row.customerRef
          this.formData.totalCarton = row.totalCarton
          copyProperty(this.formData, res.data)
          this.packingListTableBody = this.flatCartionDetail(res.data.cartons)
          copyProperty(this.formData, row)
          this.formData.editing = !this.formData.editing
          this.editerDialogVisible = true
        }
      })
    },
    flatCartionDetail(cartons) {
      const flats = []
      // sameSpecCartons
      cartons.forEach(c => {
        for (let i = 0; i < c.details.length; i++) {
         const flat = {
            'rowSpan': 0,
            'length': '',
            'width': '',
            'height': '',
            'weight': '',
            'skuNameEn': '',
            'skuNameCn': '',
            'qty': '',
            'skuWeight': '',
            'unitPrice': '',
            'currency': '',
            'sameSpecCartons': ''
          }
          if (i === 0) {
            flat.rowSpan = c.details.length
          }
          copyProperty(flat, c)
          copyProperty(flat, c.details[i])
          flats.push(flat)
        }
      })
      return flats
    },
    downloadLabel(row) {
      request({
        url: '/d/lm-label?orderId=' + row.orderId,
        method: 'get'
      }).then(res => {
        if (res.success) {
            window.open(res.data)
        }
      })
    }
  }
}
</script>
